import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate, useLocation } from "react-router-dom";
import { List, Grid } from "antd-mobile";
import { OrderCardTitle } from "@components";
import { createAction } from "@common/utils";
import { PUSH_PAGE_STACK } from "@store/global-state/action-types";
import { SAGA_FRM_PALLET_LOAD_ORDER_LINE } from "@store/frm-pallet/saga-types";

const ExistOrderLine = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const dispatch = useDispatch();
  const orderLine = useSelector((state) => state.frmPallet.palletOrderLine);

  const Descriptions = ({ record }) => {
    if (record) {
      return (
        <Grid columns={2} gap={8}>
          <Grid.Item>行号: {record.extlLineNum}</Grid.Item>
          <Grid.Item></Grid.Item>
          <Grid.Item>物料编码: {record.itemCode}</Grid.Item>
          <Grid.Item>物料名称: {record.itemName}</Grid.Item>
          <Grid.Item>批次号: {record.batchNum}</Grid.Item>
          <Grid.Item>待入数量: {record.qty}</Grid.Item>
        </Grid>
      );
    } else {
      return null;
    }
  };

  useEffect(() => {
    dispatch(
      createAction(SAGA_FRM_PALLET_LOAD_ORDER_LINE, {
        frmPalletDataId: searchParams.get("id"),
      })
    );
  }, []);

  const handleClick = (record) => {
    let path = `/app/frm-pallet/exist-ops?orderId=${record.orderId}&lineId=${
      record.id
    }&id=${searchParams.get("id")}`;
    navigate(path);
    dispatch(createAction(PUSH_PAGE_STACK, path));
  };

  return (
    <div style={{ marginTop: "45px" }}>
      <List>
        <List.Item
          style={{ backgroundColor: "#EBF2FD" }}
          description={<Descriptions record={orderLine} />}
          onClick={() => handleClick(orderLine)}
        >
          <OrderCardTitle title={`单号: ${orderLine?.orderNum}`} />
        </List.Item>
      </List>
    </div>
  );
};

export default ExistOrderLine;
